<!--  -->
<template>
  <div class="box">
    <div class="livelist">
      <div class="livestate">
        <div class="anchor-state">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="直播状态">
              <el-select v-model="flagopop" @change="gozhiboss">
                <el-option label="全部" :value="-1" />
                <el-option label="直播中" :value="true"></el-option>
                <el-option label="已结束" :value="false"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="anchor-Search">
          <div class="search-zhu">主播搜索</div>
          <el-input v-model="input" placeholder="姓名、ID"></el-input>
          <el-button
            class="search-button"
            size="mini"
            icon="el-icon-search"
            @click="searchof"
          ></el-button>
        </div>
      </div>
      <div class="alllive">
        全部直播
      </div>
      <div class="list-render">
        <div class="render" v-for="(item, index) in dataList" :key="index">
          <div>
            <el-image style="width:200px;height:150px" :src="item.img" alt="" />
          </div>
          <div>{{ item.title }}</div>
          <div>
            <span>{{ item.name }} {{ item.shijian }}</span>
          </div>
          <div class="detail-live">
            <div v-if="!item.statflag" class="gorulive">
              <div @click="gozhibozhong(item)">进入直播</div>
              <el-switch
                v-model="item.flag"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </div>
            <div v-else class="gorulive">
              <div @click="goinfo(item)">数据详情</div>
              <div @click="delone(index)">删除</div>
            </div>
          </div>
          <div class="wanjie">
            <div v-if="item.statflag" class="yijieshu">
              已结束
            </div>
            <div v-else class="zhibozhong">直播中</div>
          </div>
        </div>
        <div class="pageyemian">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            @current-change="currentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiliveList } from "@/api/live";
// import { splice } from "mock/user";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      form: {
        region: ""
      },
      input: "",
      pageIndex: 1, // 默认起始页
      pageSize: 14, // 每页数据
      dataList: [], //总数据
      total: 0,
      flag: true,
      flagopop: -1,
      searchData: "",
      indexinfo: 0
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    //获取数据
    const res = await apiliveList({
      pageIndex: this.pageIndex,
      pageSize: this.pageSize,
      flagqqq: this.flagopop
    });
    this.dataList = res.data;
    this.total = res.total;
    // console.log(this.total, "data");
  },
  methods: {
    //tap分页切换数据
    async currentChange(value) {
      console.log(value, "aaa");
      this.pageIndex = value;
      const res = await apiliveList({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        flagqqq: this.flagopop
      });
      this.dataList = res.data;
      this.total = res.total;
    },
    async gozhiboss(val) {
      // console.log(val, "sss");
      this.flagopop = val;
      const res = await apiliveList({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        flagqqq: this.flagopop
      });
      this.dataList = res.data;
      this.total = res.total;
      // console.log(this.total, "data");
    },
    searchof() {
      console.log(this.input, "123");
      let arr = [];
      this.dataList.filter(item => {
        if (item.name.indexOf(this.input) != -1) {
          arr.push(item);
        }
      });
      this.dataList = arr;
    },
    async delone(index) {
      this.dataList.splice(index, 1);
    },
    //进入直播间
    gozhibozhong(item) {
      this.$router.push({ name: "Listlive", query: { list: item } });
    },
    goinfo(item) {
      this.$router.push({ name: "Listinfo", query: { list: item } });
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  padding: 15px;
  background-color: #f5f7f9;
}
.livelist {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 15px;
}
.livestate {
  width: 100%;
  height: 50px;
  display: flex;
  // .anchor-state {
  //   width: 30%;
  //   line-height: 50px;
  // }
  .anchor-Search {
    display: flex;
    margin-left: 20px;
    .search-zhu {
      width: 90px;
      line-height: 35px;
      font-size: 14px;
    }
    .search-button {
      height: 36px;
    }
  }
}
.alllive {
  margin-left: 10px;
  margin-top: 20px;
  font-weight: bolder;
}
.list-render {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .render {
    display: block;
    width: 12%;
    margin: 5px 5px;
    padding: 5px;
    font-size: 18px;
    // position: relative;
    .detail-live {
      color: #1890ff;
      font-size: 16px;
      .gorulive {
        display: flex;
        justify-content: space-between;
        margin-right: 15px;
        cursor: pointer;
      }
    }
    .wanjie {
      width: 60px;
      position: relative;
      top: -130px;
      left: 10px;
      text-align: center;
      color: #fff;
      border-radius: 30px;
      display: block;
      .zhibozhong {
        background: rgba($color: #7fcb9e, $alpha: 0.5);
      }
      .yijieshu {
        background: rgba($color: #7e7e6c, $alpha: 0.5);
      }
    }
  }
  .pageyemian {
    margin-left: 75%;
  }
}
</style>
